<template>
	<view>
		<swiper
		class="swiperbox"
		indicator-dots="true" 
		indicator-color="#fff"
		indicator-active-color="red"
		autoplay="true"
		interval="3000"
		circular="true"
		>
		  <swiper-item class="item" v-for="(item,i) in swiperlist" :key="i">
		  <image :src="item" mode="widthFill"></image>
		  </swiper-item>
		</swiper>
		<view class="gird-list">
		  <navigator class="gird-item" open-type="navigate" v-for="(item , i) in girlist" :key="i" :url="item.uri">
		    <image :src="item.img" mode="widthFill"></image>
		    <text>{{item.mes}}</text>
		  </navigator>
		</view>
		<view class="imgs">
		  <image src="https://pic1.zhimg.com/v2-7d105b22092bff3b69f383d3e3c8b7d8_b.jpg"></image>
		  <image src="https://www.tianqiweiqi.com/wp-content/uploads/2019/04/%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E7%A8%8B%E5%BA%8F%E5%91%98%E5%9C%A8%E5%B9%B2%E4%BB%80%E4%B9%881002.gif"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlist:['../../static/img/vae1.jpg','../../static/img/vae2.jpg','../../static/img/vae3.jpg','../../static/img/vae4.jpg'],
				girlist:[
					{id:1,mes:'音乐',img:'../../static/img/music.png',uri:'../../subp/music/music'},
					{id:2,mes:'演唱会',img:'../../static/img/vae5.jpg',uri:'../../subp/concert/concert'},
					{id:1,mes:'Vae详情',img:'../../static/img/vae.png',uri:'../../subp/player/player'}
				]
			};
		}
	}
</script>

<style lang="scss">
.swiperbox,.item image{
  height: 310rpx;
}
.item,.item image{
  height: 100%;
  width: 100%;
  line-height: 310rpx;
  text-align: center;
}
.gird-list {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1rpx solid #D9D9D9;
}
.gird-item {
  display:flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content:center;/*横向居中*/
  align-items: center;/*纵向居中*/
  flex-direction: column;/*纵向布局*/
  float: left;
  width: 33.33333333%;
  height: 200rpx;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-right: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
}

.gird-item image{
  width: 60rpx;
  height: 60rpx;
}
.gird-item text{
  
  font-size: 43rpx;
  margin-top: 20rpx;
}
.imgs image{
  width: 100vw;
}
</style>
